<template>
  <div v-if="listHome" class="article">
    <nav-bar />
    <div>
      <div class="voide">
        <video :src="listHome.content" controls></video>
      </div>
      <div class="title">
        <span>{{listHome.category.title}}</span>
        <span>{{listHome.name}}</span>
      </div>
      <div class="title_pl">
        <span>{{listHome.userinfo.name}}</span>
        <span>1314万次观看</span>
        <span>520万次弹幕</span>
        <span>{{listHome.date}}</span>
      </div>
      <div class="title_dz">
        <div @click="click_dz">
          <van-icon name="good-job-o" :class="{actve_dz:dz}" />
          <span :class="{actve_dz:dz}">点赞</span>
        </div>
        <div @click="click_gz">
          <van-icon name="star-o" :class="{actve_dz:gz}" />
          <span :class="{actve_dz:gz}">收藏</span>
        </div>
        <div>
          <van-icon name="down" />
          <span>缓存</span>
        </div>
      </div>
    </div>
    <div class="fl">
      <index-video
        class="fl_1"
        v-for="(item,index) in commendList"
        :key="index"
        :categoryData="item"
      />
    </div>
    <div>
      <comment-post :dataLenght="lens" @comment_click="btns_click" ref="commentTpt" />
    </div>
    <div>
      <comment-text @lengthselect="len => lens = len" @paramsID="PostChidClick" ref="refshPost" />
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/Navbar";
import indexVideo from "@/components/indexVideo";
import CommentPost from "@/components/commentPost";
import CommentText from "@/components/commentText";
export default {
  components: {
    NavBar,
    indexVideo,
    CommentPost,
    CommentText
  },
  data() {
    return {
      listHome: null,
      commendList: null,
      lens: null,
      Postcom: {
        comment_content: "",
        comment_date: "",
        article_id: "",
        parent_id: null
      },
      dz: null,
      gz:null
    };
  },
  created() {
    this.articleitemData();
    this.commendDate();
    this.collectionInit();
  },
  methods: {
    // 获取文章
    async articleitemData() {
      const res = await this.$http.get("/article/" + this.$route.params.id);
      this.listHome = res.data[0];
      if(this.listHome){
          this.collectionInit1();
      }
    },
    // 获取视频
    async commendDate() {
      const res = await this.$http.get("/commend");
      this.commendList = res.data;
    },
    async btns_click(res) {
      const date = new Date();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m < 10) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }
      let dateStr = `${m}-${d}`;
      this.Postcom.comment_content = res;
      this.Postcom.comment_date = dateStr;
      this.Postcom.article_id = this.$route.params.id;
      // 发送请求
      const result = await this.$http.post(
        "/comment_post/" + localStorage.getItem("id"),
        this.Postcom
      );
      this.$refs.refshPost.changeComment();
      this.Postcom.parent_id = null;
      if (result.status == 200) {
        this.$notify({
          message: "评论成功！！！！",
          color: "white",
          background: "green"
        });
      }
    },
    PostChidClick(id) {
      this.Postcom.parent_id = id;
      this.$refs.commentTpt.focusIpt();
    },
    //收藏文章
    async click_dz() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.post(
          "/collection/" + localStorage.getItem("id"),
          {
             article_id: this.$route.params.id
          }
        );
        console.log(res);
        if (res.data.msg == "收藏成功") {
          this.dz = true;
        } else {
          this.dz = false;
        }
      }
    },
    //登入页面获取是否收藏文章
    async collectionInit() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.get(
          "/collection/" + localStorage.getItem("id"),
          {
            params: {
              article_id: this.$route.params.id
            }
          }
        );
        this.dz = res.data.success
      }
    },
    // 关注作者
    async click_gz() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.post(
          "/sub_scription/" + localStorage.getItem("id"),
          {
             sub_id: this.listHome.userid
          }
        );
        if (res.data.msg == "关注成功") {
          this.gz = true;
        } else {
          this.gz = false;
        }
      }
    },
    async collectionInit1() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.get(
          "/sub_scription/" + localStorage.getItem("id"),
          {
            params: {
              sub_id:this.listHome.userid
            }
          }
        );
        this.gz = res.data.success
      }
    }
  },

  watch: {
    //  当路径发生变的时候重新传染页面
    $route() {
      this.articleitemData();
      this.commendDate();
      this.collectionInit();
      this.collectionInit1();
    }
  }
};
</script>
<style lang="less" scoped>
.article {
  background-color: white;
}
.voide {
  width: 100%;
  video {
    width: 100%;
  }
}
.title {
  margin: 2.778vw 2.778vw;
  span:nth-child(1) {
    background-color: rgb(244, 244, 244);
    padding: 1.389vw 0.833vw;
    border-radius: 1.389vw;
    color: rgb(251, 114, 153);
    font-size: 3.889vw;
  }
  span:nth-child(2) {
    margin-left: 1.389vw;
    font-size: 3.611vw;
    color: rgb(49, 49, 49);
  }
}
.title_pl {
  margin: 2.778vw 2.778vw;
  span {
    margin-left: 1.389vw;
    font-size: 3.611vw;
    color: rgb(153, 153, 153);
  }
  span:nth-child(1) {
    margin-left: 0vw;
    font-size: 4.167vw;
    color: rgb(49, 49, 49);
  }
}
.title_dz {
  display: flex;
  margin: 0 2.778vw;
  padding: 2.778vw 0;
  align-items: center;
  div span:nth-child(2) {
    margin: 0.556vw 1.389vw;
  }
  span {
    font-size: 4.167vw;
    color: rgb(117, 117, 117);
  }
  .actve_dz {
    color: pink;
  }
}
.van-icon {
  font-size: 4.167vw;
  color: rgb(117, 117, 117);
}
.fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .fl_1 {
    width: 45%;
  }
}
</style>